<HTML>
<HEAD>
    <TITLE>北京出租房</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link href="style/mycss.css" rel="stylesheet" type="text/css"/>
    <link href="style/text.css" rel="stylesheet" type="text/css"/>
    <link href="style/btn.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
    <script language="javascript">
        $(function () {
            findAllPage(1, 5);
            select();
            $("#login").click(function () {
                $.ajax({
                    url: "login",
                    type: "post",
                    data: {
                        uName: $("#uname").val(),
                        password: $("#password").val()
                    },
                    success: function (result) {
                        if (result.meta.status === 100) {
                            alert(result.meta.msg);
                            $("#uname").val("");
                            $("#password").val("");
                        } else {
                            localStorage.setItem("user", JSON.stringify(result.data));
                            location.href = "login.html";
                        }
                    },
                    dataType: "json"
                });
            });

            $("#sbn").click(function () {
                search(1, 5);
            });

        })

        function chop(m, page, flag) {
            $("#htd").empty();
            for (var i = 1; i <= m; i++) {
                if (i === page) {
                    getNumber(i, false, flag);
                } else
                    getNumber(i, true, flag);
            }
        }

        function findAllPage(page, count) {
            $.post("findAll", {
                page: page, count: count
            }, function (result) {
                $("#htb").empty();
                for (var i = 0; i < result.data.records.length; i++) {
                    var house = result.data.records[i];
                    getPage(house);
                }
                chop(result.data.pages, result.data.current, true);
            }, "json")
        }


        function getPage(house) {
            var table = document.getElementById("htb");
            var tr = document.createElement("tr");

            var td_title = document.createElement("td");
            var a_title = document.createElement("a");
            a_title.innerText = house.title;
            a_title.href = "javascript:void(0)";
            a_title.onclick = function () {
                detail(house.hid);
            };
            td_title.appendChild(a_title);
            tr.appendChild(td_title);

            var td_money = document.createElement("td");
            td_money.align = "center";
            td_money.style = "height:30px;";
            td_money.innerText = house.money + "元";
            tr.appendChild(td_money);

            var td_time = document.createElement("td");
            td_time.align = "center";
            td_time.innerText = house.time;
            tr.appendChild(td_time);

            table.appendChild(tr);
        }

        function getNumber(p, q, flag) {
            var td = document.getElementById("htd");
            var a = document.createElement("a");
            if (q === true) {
                a.href = "javascript:void(0)";
                a.onclick = function () {
                    if (flag) {
                        findAllPage(p, 5);
                    } else {
                        search(p, 5);
                    }
                };
            } else {
                a.style.color = "red";
            }
            var span1 = document.createElement("span");
            span1.className = "fk fkd";
            var span2 = document.createElement("span");
            span2.innerText = p;
            span2.className = "pc";
            a.appendChild(span1);
            a.appendChild(span2);
            td.appendChild(a);
        }

        function detail(id) {
            localStorage.setItem("hid", id);
            location.href = "detail.html";
        }

        function select() {
            var qu = document.getElementById("qu");
            var jie = document.getElementById("jie");
            var type = document.getElementById("type");
            $.post("select", function (result) {
                for (var i = 0; i < result[0].data.length; i++) {
                    if (i % 5 === 0) {
                        var br = document.createElement("br");
                        type.appendChild(br);
                    }
                    var input = document.createElement("input");
                    input.type = "checkbox";
                    input.id = "tid";
                    input.name = "tid";
                    input.value = result[0].data[i].tid;
                    var label = document.createElement("label");
                    label.htmlFor = result[0].data[i].tid; // 将 label 与 input 关联起来
                    label.textContent = result[0].data[i].name; // 设置复选框的文本内容
                    type.appendChild(input);
                    type.appendChild(label);
                }
                for (i = 0; i < result[1].data.length; i++) {
                    qu.add(new Option(result[1].data[i].name, result[1].data[i].did))
                }
                for (i = 0; i < result[2].data.length; i++) {
                    jie.add(new Option(result[2].data[i].name, result[2].data[i].sid))
                }
            }, "json")
        }

        function search(page, count) {
            var fields = $("#search").serializeArray();
            var obj = {};
            $.each(fields, function (index, field) {
                if (obj[field.name]) {
                    // 如果对象中已经有这个属性，意味着这是一个复选框组
                    // 将值添加到数组中
                    if (!Array.isArray(obj[field.name])) {
                        // 如果不是数组，则转换成数组
                        obj[field.name] = [obj[field.name]];
                    }
                    obj[field.name].push(field.value);
                } else {
                    // 对于非复选框字段，直接赋值
                    obj[field.name] = field.value;
                }
            });
            if(obj["tid"]!=null){
                if(obj["tid"].length===1){
                    obj["tid"]=[obj["tid"]];
                }
            }

            obj["page"] = page;
            obj["count"] = count;
            $.ajax({
                url: "search",
                type: "post",
                data: JSON.stringify(obj),
                contentType: "application/json;charset=utf-8",
                success: function (result) {
                    $("#htb").empty();
                    for (var i = 0; i < result.data.records.length; i++) {
                        var house = result.data.records[i];
                        getPage(house);
                    }
                    chop(result.data.pages, result.data.current, false);
                }
            })
        }
    </script>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="5"><img src="images/top.jpg" width="780" height="170"></td>
    </tr>
    <tr>
        <td colspan="5"><img src="images/middle1.jpg" width="780" height="47"></td>
    </tr>
    <tr>
        <td width="38" background="images/middle2.jpg">&nbsp;</td>
        <td width="172" valign="top" align="center">
            <form method="post" name="myForm">
                <p>&nbsp;</p>
                <table align="center">
                    <tr>
                        <td colspan="2">用户名：</td>
                    </tr>
                    <tr>
                        <td colspan="2"><input id="uname" type="text" name="uname" size=10" class="editbox"></td>
                    </tr>
                    <tr>
                        <td colspan="2">密&nbsp;&nbsp;码：</td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="password" id="password" name="upass" size=10" class='editbox'></td>
                    </tr>
                    <tr>
                        <td>
                            <input type="hidden" name="sign" value="login"/>
                            <input type="button" id="login" value="登陆" class='btn'>
                            <input type="reset" value="重置" class='btn'>
                        </td>
                    </tr>
                    <tr>
                        <td><a href="reg.html">注册用户</a></td>
                    </tr>
                </table>
            </form>
        </td>
        <td width="35" background="images/layout_24.gif">&nbsp;</td>
        <td width="495" align="center"><br/>
            <form method="post" id="search" name="mf">
                <input type="hidden" name="page" value="1"/>
                <script>
                    function fswitch(id) {
                        var o = document.getElementById(id);
                        if (o) {
                            $("#shi").val('');
                            $("#ting").val('');
                            if (o.style.display == "none") {
                                o.style.display = "block";
                            } else {
                                o.style.display = "none";
                            }
                        }
                    }
                </script>
                <div style="text-align:left;width:88%;">
                    <input type="text" name="title">
                    <input type="button" value="查询" id="sbn" class="btn"> <span onclick="fswitch('advSearch');"
                                                                                  style="cursor:hand;color:blue;">高级搜索</span>
                </div>

                <table width="88%;" id="advSearch" style="border:solid 0px #000;display:none;">

                    <tr>
                        <td>区县：</td>
                        <td><select id="qu" name="did" style="width:80%">
                            <option value="0">不限--</option>
                        </select></td>
                        <td rowspan="6">&nbsp;</td>
                    </tr>
                    <tr>
                        <td>街道：</td>
                        <td><select id="jie" name="sid" style="width:80%">
                            <option value="0">不限--</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td>租金：</td>
                        <td><input type="text" name="min" size="5" class="unnamed1" value="0"> 至 <input type="text"
                                                                                                         name="max"
                                                                                                         size="5"
                                                                                                         class="unnamed1"
                                                                                                         value="0">
                            元/月
                        </td>
                    </tr>
                    <tr>
                        <td>户型：</td>
                        <td><select name="shi" id="shi" style="width:60%">
                            <option value="">不限--</option>
                            <option value="一">一</option>
                            <option value="两">两</option>
                            <option value="三">三</option>
                            <option value="四">四</option>
                            <option value="五">五</option>
                            <option value="六">六</option>
                        </select>室 <select name="ting" id="ting" style="width:60%">
                            <option value="">不限--</option>
                            <option value="一">一</option>
                            <option value="两">两</option>
                            <option value="三">三</option>
                            <option value="四">四</option>
                        </select> 厅
                        </td>
                    </tr>
                    <tr>
                        <td>房屋类型：</td>
                        <td id="type">
                        </td>
                    </tr>
                    <tr>
                        <td>发布日期：</td>
                        <td><select name="time" style="width:80%">
                            <option value="0">不限--</option>
                            <option value="1">当天</option>
                            <option value="2">近两天</option>
                            <option value="3">近三天</option>
                            <option value="7">近一周</option>
                            <option value="14">近两周</option>
                            <option value="30">近一月</option>
                        </select></td>
                    </tr>
                    <tr>
                        <hr/>
                        <td colspan='3'>

                        </td>
                    </tr>

                </table>
                <table width="88%" cellspacing="0">
                    <tr>
                        <TD width='250' class="table_title">标题</TD>
                        <TD width='90' align='center' class="table_title">月租金</TD>
                        <TD align='center' class="table_title">发布日期</TD>
                    </tr>
                    <tbody id="htb">
                    </tbody>

                    <tr>

                        <td id="htd" colspan='3'>
                        </td>
                    </tr>
                </table>

            </form>
        </td>
        <td width="40" background="images/middle4.jpg">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="5"><img src="images/bottom.jpg" width="780" height="82"></td>
    </tr>
</table>
<P align="center">教育 版权所有</P>
<br/>
</BODY>
</HTML>